<template>
  <popup ref="popup_asset">
    <view class="contract_asset_popup_box">
      <view class="title">资产确认</view>

      <!-- 数据内容列表 -->
      <view>
        <facility-inspections
          v-for="(item, index) in dataList"
          :key="index"
          :msg="item.contractConfirmMsg"
          :img="item.contractConfirmContent"
          :id="item.contractConfirmId"
          :index="getSelectedIndex(item.contractConfirmId)"
          @on-selected="onSelected"
          :disabled="props.state == CommonSateEnum.YES"
        />
      </view>

      <view class="options">
        <view class="choose" v-if="props.state == CommonSateEnum.NOT">
          <view class="bth" @click="close"> 取消确认 </view>
          <view class="bth warn" @click="submit"> 提交确认 </view>
        </view>
        <view class="choose" v-else>
          <view class="bth go_back" @click="close"> 返回 </view>
        </view>
      </view>
    </view>
  </popup>
</template>

<!-- 资产确认弹窗 -->
<script lang="ts" setup>
import { onMounted, ref, watch, type PropType } from 'vue'
import facilityInspections from './facility-inspections.vue'
import popup from '@/components/common/popup/popup.vue'
import { ReqSelectAllByCategory } from '@/api/contractConfirm'
import type {
  ContractConfirm,
  ContractDamaged,
  QueryContractAssetlConfirm,
} from '@/config/data/data'
import { CommonSateEnum, ContractConfirmTypeEnum } from '@/config/enum/enum'
import { ReqContractAssetConfirm } from '@/api/contract'

// //接受父组件参数
const props = defineProps({
  /**
   * 损坏的资产列表内容
   */
  data: {
    type: Array as PropType<ContractDamaged[]>,
    default: [],
  },
  /**
   * 合同编号id
   */
  id: {
    type: Number,
    default: 0,
  },
  /**
   * 确认状态
   */
  state: {
    type: Number,
    default: 0,
  },
})

//获取当前选中的下标
const getSelectedIndex = (id: number) => {
  //如果没有确认过，则没有默认选中
  if (props.state == CommonSateEnum.NOT) {
    return -1
  }

  let index = props.data.findIndex((s) => s.id == id)
  if (index == -1) {
    return 0
  } else {
    return props.data[index].state
  }
}

//自定义事件
const emit = defineEmits<{
  /**
   * 提交变更事件
   * @param state: 变更后的状态
   * @param list: 有问题的资产内容
   */
  (e: 'onSubmit', data: { state: number; list: any[] }): void
}>()

/**
 * 选中结果列表
 * @param id：选项id
 * @param state：选中等级状态
 */
const resultList = ref<{ id: number; state: number }[]>([])

//选中列表
const dataList = ref<ContractConfirm[]>([])

/**
 * 选中结果事件
 * @param id 资产选项id
 * @param state 资产状态
 */
const onSelected = (data: { id: number; state: number }) => {
  let findIndex = resultList.value.findIndex((s) => s.id == data.id)
  if (findIndex == -1) {
    resultList.value.push(data)
  } else {
    resultList.value[findIndex].state = data.state
  }
}

//弹窗组件实例
const popup_asset = ref<InstanceType<typeof popup> | null>(null)

//打开
const open = () => popup_asset.value?.open()

//关闭
const close = () => popup_asset.value?.close()

//监听父组件传递的id
watch(
  () => props.id,
  (newValue, oldValue) => {
    query.value.id = newValue
  }
)

//请求参数
const query = ref<QueryContractAssetlConfirm>({
  list: [],
  id: props.id,
})

//提交确认
const submit = () => {
  if (resultList.value.length != dataList.value.length) {
    uni.showToast({
      title: '请检查所有的资产设施',
      icon: 'none',
      mask: true,
    })
    return
  }
  uni.showLoading({
    title: '确认中...',
    mask: true,
  })
  query.value.list = resultList.value.filter((s) => s.state != 0)
  ReqContractAssetConfirm(query.value)
    .then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: res.data ? '确认成功' : '确认失败',
          icon: 'none',
          mask: true,
        })
        emit('onSubmit', { state: res.data ? 1 : 0, list: query.value.list })
      }
    })
    .finally(() => {
      close()
      uni.hideLoading()
    })
}

// 初始化数据
const initData = () => {
  ReqSelectAllByCategory({ category: ContractConfirmTypeEnum.ASSET }).then((res) => {
    if (res.code == 200 && res.data) {
      dataList.value = res.data
    }
  })
}

// 对外暴露方法
defineExpose({
  open,
  close,
})

//页面加载
onMounted(() => {
  initData()
})
</script>

<style scoped lang="scss">
.contract_asset_popup_box {
  width: 100%;

  .title {
    position: sticky;
    top: 0;
    left: 0;
    text-align: center;
    padding-bottom: 20rpx;
    background-color: #fff;
    color: rgb(249, 191, 54);
    font-weight: 700;
    font-size: 32rpx;
    z-index: 2;
  }

  .options {
    width: 100%;
    height: 146rpx;
  }

  .choose {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 30rpx 50rpx;
    width: calc(100% - 100rpx);
    height: 86rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $uni-bg-color;

    .bth {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 40%;
      color: rgb(247, 174, 49);
      background-color: rgba(243, 220, 181, 0.439);
      border-radius: 43rpx;
      transition: all 0.2s;

      &:active {
        opacity: 0.8;
      }
    }

    .go_back {
      width: 100% !important;
    }

    .warn {
      color: #fff;
      background-color: rgb(247, 174, 49);
    }
  }
}
</style>
